import React from 'react';
import ReactDom from 'react-dom';
import { Avatar } from 'antd';

import { HashRouter as Router, Route, Link } from "react-router-dom";
import Login from './componenet/login'
import Reg from './componenet/reg'
import Pub from './componenet/pub'
import GetAll from './componenet/getall';
import Get from './componenet/get'
import './css/login.css'
import { Layout, Menu, Breadcrumb, Icon,Col } from 'antd';

const { Header, Content, Footer } = Layout;
import 'antd/lib/layout/style'
import 'antd/lib/menu/style'
import './css/login.css'
import  'antd/lib/avatar/style'
const Home = () => <h1>Home</h1>
class Root extends React.Component {



  render() {
    return (
      <Router>
        <Layout>
          <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }} >
            <Menu theme="dark"
              mode="horizontal"
              defaultSelectedKeys={['1']}
              style={{ lineHeight: '60px' }}>
              <Menu.Item key="reg">
                <Link to="/reg"><Icon type="home" />注册</Link>
              </Menu.Item>
              <Menu.Item key="put">
                <Link to="/pub"><Icon type="bars" />上传</Link>
              </Menu.Item>
              <Menu.Item key="getall">
                <Link to="/getall"><Icon type="home" />列表查看</Link>
              </Menu.Item>
              <Menu.Item key="get">
                <Link to="/get"><Icon type="bars" />详情页</Link>
              </Menu.Item>
              <Col span={2}> <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Col>
            </Menu>
          </Header>
          <h1></h1>
          <h1></h1>
          <h1></h1>
          <h1></h1>
          <h1></h1>
          <Content style={{ padding: '5px  20px' }} type="body">
            <div style={{ background: '#fff', padding: 30, minHeight: 50 }}>
              <Route exact path="/" component={Login} />
              <Route exact path="/login" component={Login} />
              <Route path="/reg" component={Reg} />
              <Route path="/pub" component={Pub} />
              <Route path="/home" component={Home} />
              <Route path="/getall" component={GetAll} />
              <Route path="/get" component={Get} />
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }} type="obj" >Ant Design ©2018 Created by Ant UED</Footer>

        </Layout>
      </Router>
    )
  }
}


ReactDom.render(<Root />, document.getElementById('root'))
